<template>
  <el-dialog
    title="移动目录"
    :visible.sync="dialogVisible"
    width="30%"
    @open="getMenus"
    @closed="closed"
  >
    <el-tree
      :data="data"
      default-expand-all
      node-key="id"
      :highlight-current="true"
      :expand-on-click-node="false"
      :check-on-click-node="true"
      :props="defaultProps"
      @node-click="nodeClick"
    >
    </el-tree>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :disabled="!newParent" type="primary" @click="moveMenu">确 定</el-button>
      </span>
  </el-dialog>
</template>
<script lang="ts">
  import Vue from 'vue';
  import Component from 'vue-class-component';
  import { Prop } from 'vue-property-decorator'
  import Axios from '../../utils/axios';
  import config from '../../utils/config';
  @Component({})
  export default class MoveTo extends Vue {
    //面板是否展示
    @Prop(String) show!: Boolean;
    //当前节点数据
    @Prop(Object) currentData!: any;

    get dialogVisible(){
      return this.show;
    }
    set dialogVisible(val){
      this.$emit('update:show',val);
    }

    data:any =  []
    newParent:any = 0

    //获取目录
    getMenus(){
      Axios({
        url:`${config.apiHost}/catalogues`,
        method:'post',
        data: {
          isShowAllCatalogue: true,
          mainId: this.currentData.mainId
        }
      }).then(res => {
        this.data = res.data;
      }).catch(err => {
        this.$message.error(err.message);
      })
    }
    //移动目录
    moveMenu(){
      Axios({
        url:`${config.apiHost}/catalogue/move`,
        method:'post',
        data: {
          isShowAllCatalogue: true,
          mainId: this.currentData.mainId,
          newParent: this.newParent
        }
      }).then(res => {
        this.$message.success('移动好了！');
        this.dialogVisible = false;
      }).catch(err => {
        this.$message.error(err.message);
      })
    }

    nodeClick(...args){
      const [data] = args
      this.newParent = data.mainId
    }

    closed() {
      this.newParent = 0
    }
  }
</script>
<style lang="less" scoped>
  /deep/.el-dialog {
    max-height: 50%;
    display: flex;
    flex-direction: column;
    .el-dialog__body {
      flex: 1;
      overflow: auto;
      text-align: left;
      .el-tree {
        display: inline-block;
        min-width: 100%;
      }
      .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background-color: deepskyblue;
        color: #fff;
        .el-tree-node__expand-icon {
          color: #fff;
        }
        .el-tree-node__expand-icon.is-leaf {
          color: transparent;
        }
      }
    }
  }
</style>
